<template>
	<view class="liu-watermark" :style="{opacity:opacity}">
		<view class="item-name" v-for="index in total" :key="index"
			:style="'transform: rotate('+rotate+'deg);width:'+(100/column)+'%;font-size:'+fontSize+'rpx;color:'+color">
			{{content}}
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const props = defineProps({
		content: {
			type: String,
			default: '小杨哥头像'
		},
		//水印总数量
		total: {
			type: Number,
			default: 18
		},
		//显示列数
		column: {
			type: Number,
			default: 3
		},
		//旋转角度
		rotate: {
			type: Number,
			default: -35
		},
		//水印透明度
		opacity: {
			type: Number,
			default: 0.3
		},
		//字体大小(rpx)
		fontSize: {
			type: Number,
			default: 28
		},
		//字体颜色
		color: {
			type: String,
			default: '#666666'
		},
		//页面是否含有tabbar
		hasTab: {
			type: Boolean,
			default: false
		}
	});
</script>

<style scoped>
	.liu-watermark {
		width: 100%;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999999;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.item-name {
		text-align: center;
	}
</style>